<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <title>陈力铫生日快乐</title>
    <style>
        body {
            /* 背景改为渐变效果 */
            background: linear-gradient(to bottom, #fce4ec, #ffffff);
            font-family: Arial, sans-serif;
            text-align: center;
        }

        h1 {
            color: hotpink;
            margin: 0;
            padding: 20px;
            /* 为主标题添加立体效果 */
            text-shadow: 1px 1px 1px #d81b5f, 2px 2px 3px #c2185b;
        }

        h2 {
            color: #616161;
            margin: 0;
            padding: 10px;
        }

        /* 定义数字滚动动画的样式 */
        #count {
            display: inline-block;
            transition: all 0.5s ease-in-out;
        }

        /* 祝福区域的样式调整 */
      .message-area {
            background-color: #fff;
            border: 2px solid #e91e63;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 60%;
            margin: 20px auto;
            text-align: left;
            line-height: 1.5;
        }

        /* 在祝福区域顶部和底部添加手绘风格线条 */
      .message-area::before {
            content: '';
            display: block;
            border-top: 2px dashed #e91e63;
            margin-bottom: 10px;
        }

      .message-area::after {
            content: '';
            display: block;
            border-bottom: 2px dashed #e91e63;
            margin-top: 10px;
        }

       
       
        /* 祝福区域悬停效果 */
      .message-area:hover {
            border-color: #ff4081;
            background-color: #fff5f8;
        }
    </style>
    <script>
        function countUp() {
            var countElement = document.getElementById('count');
            var current = 0;
            var target = 2005;
            var step = 1;
            var duration = 3000;
            var startTime = Date.now();

            function update() {
                var elapsed = Date.now() - startTime;
                if (elapsed < duration) {
                    current = Math.min(target, Math.floor(elapsed / duration * target));
                    countElement.textContent = current;
                    requestAnimationFrame(update);
                } else {
                    countElement.textContent = target;
                }
            }

            update();
        }

        function blinkTitle() {
            var h1 = document.getElementsByTagName('h1')[0];
            setInterval(function () {
                h1.classList.toggle('blink');
            }, 500);
        }

        function showMore() {
            var moreBlessings = document.getElementById('more - blessings');
            moreBlessings.style.display = 'block';
        }

        window.onload = function () {
            countUp();
            blinkTitle();
        }
    </script>
</head>

<body>
    <h1>陈力铫生日快乐</h1>
    <h2>这是我们相遇的<span id="count"></span>天</h2>
    <div class="message-area">
        <p style="color: pink;">亲爱的陈力铫：</p >
        <p>生日快乐♫•*¨*•.¸¸♪ ✨˗ˋˏ🎂ˎˊ˗HBD to youuu ⋆  ᖭི༏ᖫྀ ⋆</p>
        <p>今天是十一月十七</p>
        <p>今天是我们认识的第六个年头</p>
        <p>今天祝你生日快乐……</p>
        <p>在这个特别的日子里，愿你的生活充满无尽的欢乐和惊喜。每一个新的一天都如同清晨的阳光，明亮而温暖。你就像一颗璀璨的星星，在生活的天空中闪耀着独特的光芒。</p >
        <p>希望你永远保持乐观积极的心态，追逐自己的梦想。无论是高山还是低谷，都能坚定地走下去。</p >
        <p>再次祝你生日快乐，愿你新的一岁充满美好的回忆，收获满满的幸福与成长。</p >
        <button onclick="showMore()">点击查看更多</button>
        <div id="more - blessings" style="display: none;">
        	<p>还记得我们一起度过的那些美好时光吗？虽然留存的照片不多(○｀ε´○)</p >
            <img src="image6.jpg" alt="图片6" width="108px">
            <img src="image7.jpg" alt="图片7" width="192px">
            <img src="image8.jpg" alt="图片8" width="192px">
        </div>
        </div>
        <script>
        function showImages() {
            var moreBlessings = document.getElementById('more - blessings');
            moreBlessings.style.display = 'block';
        }
        </script>
</body>

</html>